<template>
	<div class="">
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex" :navs="navs" :changeNav="changeNav"></PcDrawer>
					<div class="bghhhhh" style="overflow: scroll;height: 100vh;padding-bottom: 50px;">
						<div class="rightCon">
							<headerPcTow :title="$t('l_kefuzhongxin')"></headerPcTow>
                            <div style="display:flex;font-size:18px;color:#fff;margin: 10px 0;">
                                
                                {{ config.maintain_desc}}
                            </div>
							<div class="listTow">
								<div class="listLeft">
									<div class="listLeftImgsTow">
										<img src="../../assets/images/yh/img_kf_kf01.png" alt="">
									</div>
									<div class="listLeftCon" @click="goKefu1">
										<div class="listLeftConTop">
											{{$t('l_zaixiankefu')}}
											<div class="listLeftConTopButTow">
												{{$t('l_lianxikefu')}}
											</div>
										</div>
										<div class="listLeftConBotTow">
											{{$t('l_zhuanyekefu')}}
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="listTow" style="display: block;padding-bottom: 80px;">
								<div class="itTitle">
									联系方式
								</div>
								<div class="itcon">
									<div class="itconL">
										<img src="../../assets/images/yh/bg.png" alt="">
										<div class="itconLC">
											<p style="color: var(--theme-text-color-lighten);">代理-米娜</p>
											<p>
												<img src="../../assets/images/yh/1700044909799477250.png" alt="">
												mchat5001
											</p>
										</div>
									</div>
									<div class="itconR">
										复制打开
									</div>
								</div>
							</div> -->

						</div>

						<Bottom></Bottom>
					</div>
				</div>
			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<div class="recharge pageContainer">
					<div class="header">
						<div class="left">
							<!-- <i style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
								</svg>
							</i> -->
							<span></span>
						</div>
						<div class="title">{{$t('l_kefuzhongxin')}}</div>
						<div class="right"></div>
					</div>
					<div class="container scroll-container">
                       
						<div class="recharge_content">
                            <div style="display:flex;font-size: 0.5rem;color:#fff;margin: 0.3rem 0;">
                                
                                {{ config.maintain_desc}}
                            </div>
							<div class="recharge_content_box">
								<div class="list">
									<div class="listLeft">
										<div class="listLeftImgs">
											<img src="../../assets/images/yh/img_kf_kf01.png" alt="">
										</div>
										<div class="listLeftCon" @click="goKefu">
											<div class="listLeftConTop">
												{{$t('l_zaixiankefu')}}
												<div class="listLeftConTopBut">
													{{$t('l_lianxikefu')}}
												</div>
											</div>
											<div class="listLeftConBot">
												{{$t('l_zhuanyekefu')}}
											</div>
										</div>
									</div>
								</div>

							</div>

                           
						</div>
					</div>
				</div>

				<!-- <Tabnav :activeInd="tabnavIndex"></Tabnav> -->

			</el-col>
		</el-row>
	</div>
</template>

<script>
	import Tabnav from '../../components/Tabnav.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	import navHeader from '../../components/navHeader.vue'
	import Bottom from '../../components/bottom.vue'
	export default {
		data() {
			return {
                config:{},
				tabnavIndex: 3,
				chat_url: '',
				navIndex: 0,
				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					{
						id: -2,
						name: this.$t('l_zuijin'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],
			}
		},
		components: {
			PcHedaer,
			PcDrawer,
			headerPcTow,
			navHeader,
			Bottom,
			Tabnav
		},
		created() {
			this.ConfigGetConfig('chat_url');
		},
		methods: {
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav(item) {
				this.$router.push('/')
			},
			goKefu() {
				if (this.chat_url) {
					// this.$router.push('./chat?url=' + this.chat_url)
					window.location.href = this.chat_url
				}
			},
			goKefu1() {
				window.open(this.chat_url)
			},
			ConfigGetConfig(key) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.ConfigGetConfig({
					key: key,
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						// this.info = res.data
						res.data.forEach((item, index) => {
							if (item.key == 'chat_url') {
								this.chat_url = item.value
							}else{
                                this.config=item.value
                            }
						})
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			goback() {
				this.$router.go(-1)
			}
		}
	}
</script>
<style type="text/css">
	.elsedropdown {
		border: 0.01rem solid var(--theme-color-line);
		background-color: #171e28;
		margin-top: 3px !important;
	}

	.elsedropdown .el-select-dropdown__item {
		color: var(--theme-text-color-lighten);
	}

	.elsedropdown .popper__arrow {
		display: none;
	}
</style>
<style scoped>
	* {
		box-sizing: border-box;
	}

	/deep/.el-select .el-input .el-select__caret {
		color: #005dff;
	}

	/deep/.el-table th.el-table__cell>.cell {
		text-align: center !important;
	}

	/deep/.el-input__inner {
		width: 80px !important;
		border-radius: 15px !important;
		padding: 0 !important;
		padding-left: 5px !important;
		height: 30px !important;
		line-height: 30px !important;
		color: var(--theme-text-color) !important;
	}

	/deep/.el-input__inner::placeholder {
		color: var(--theme-text-color) !important;
	}

	/* //下拉框 */
	/deep/.el-select-dropdown {
		border: none !important;
		z-index: 999;
		background-color: rgba(1, 28, 82, 0.8) !important;
	}


	/* //鼠标经过下拉框 */
	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		color: #005dff !important;
		background-color: transparent !important;
	}

	.topCon {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 0.2rem;
		padding-top: 0.2rem;
		box-sizing: border-box;
	}

	.total_recharge {
		font-size: .26rem;
		color: var(--theme-text-color-lighten);
	}

	.total_recharge span {
		color: var(--theme-text-color);
		margin-left: 0.08rem;
	}

	.header {
		width: 100%;
		height: 0.9rem;
		position: fixed;
		top: 0;
		left: 0;
		/* border-bottom: 0.01rem solid var(--theme-color-line); */
		z-index: 100;
		padding: 0 .1rem 0 .2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: var(--theme-main-bg-color);
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
	}

	.header .left {
		font-size: .24rem;
		height: 0.8rem;
		width: 0.8rem;
		display: flex;
		align-items: center;
		color: var(--theme-text-color);
		cursor: pointer;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 0.34rem;
		font-size: .3rem;
		margin-top: -0.014rem;
		color: #fff;
		text-align: center;
	}

	.header .right {
		height: 0.8rem;
		width: 0.8rem;
	}

	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 62%;
		margin: 0 auto;
	}

	.pc_con {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.list {
		padding: 0.2rem;
		box-sizing: border-box;
		/* background-color: var(--theme-main-bg-color); */
		background-color: var(--theme-main-bg-color) !important;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20px;
	}

	.listTow {
		padding: 15px;
		box-sizing: border-box;
		background-color: var(--theme-main-bg-color);
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20px;
	}

	.listLeft {
		display: flex;
		align-items: center;
	}

	.listLeftImgs img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 0.2rem;
	}

	.listLeftImgsTow img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 15px;
	}

	.listLeftConTop {
		font-size: 15px;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		color: var(--theme-text-color-darken);
	}

	.listLeftConTopBut {
		padding: 5px;
		box-sizing: border-box;
		margin-left: 0.23rem;
		border-radius: 4px;
		text-align: center;
		border: 0.01rem solid var(--theme-ant-primary-color-0);
		color: var(--theme-ant-primary-color-0);
	}

	.listLeftConTopButTow {
		padding: 5px;
		box-sizing: border-box;
		margin-left: 10px;
		border-radius: 4px;
		text-align: center;
		font-size: 15px;
		cursor: pointer;
		border: 0.5px solid var(--theme-ant-primary-color-0);
		color: var(--theme-ant-primary-color-0);
	}

	.listLeftConBot {
		color: var(--theme-text-color);
		font-size: 13px;
		line-height: .3rem;
		white-space: normal;
	}

	.listLeftConBotTow {
		color: var(--theme-text-color);
		font-size: 13px;
		line-height: 20px;
		white-space: normal;
	}

	.itTitle {
		margin-bottom: 10px;
		font-size: 17px;
		color: var(--theme-hx-color);
	}

	.itcon {
		display: flex;
		align-items: center;
	}

	.itconL {
		display: flex;
		align-items: center;
	}

	.itconL>img {
		width: 33px;
		height: 33px;
		margin-right: 10px;
		border-radius: 50%;
	}

	.itconLC {
		color: var(--theme-hx-color);
		font-size: 13px;
	}

	.itconLC img {
		width: 18px;
		height: 18px;
		margin-right: 4px;
		border-radius: 50%;
	}

	.itconLC p:nth-child(2) {
		display: flex;
		align-items: center;
	}

	.itconR {
		width: 70px;
		height: 28px;
		font-size: 13px;
		text-align: center;
		line-height: 28px;
		color: var(--theme-hx-color);
		border-radius: 5px;
		margin-left: 40px;
		cursor: pointer;
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
	}

	/* 底部 */
	.bottomBox {
		background: var(--theme-side-footer-bg-color);
		width: 100%;
		margin-top: 170px;
	}

	.bottomBoxOne {
		width: 62%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center; */
	}

	.boxTop {
		display: flex;
		justify-content: space-between;
		padding: 20px 0px;
		box-sizing: border-box;
	}

	.boxTopL {
		display: flex;
		justify-content: space-between;
		font-size: 15px;
	}

	.boxTopL li {
		width: 176px;
		color: var(--theme-text-color-lighten);
	}

	.boxTopL h3 {
		font-weight: 400;
		font-size: 15px;
		color: var(--theme-text-color);
		margin-bottom: 8px;
	}

	.boxTopL a {
		cursor: pointer;
		color: var(--theme-text-color-lighten);
		margin-bottom: 8px;
	}

	.boxTopL a:hover {
		color: var(--theme-primary-color);
	}

	.boxTopR {
		width: 420px;
	}

	.boxTopRImg {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}

	.boxTopRImg img {
		width: 45px;
		height: 45px;
		margin: 0px 12px 12px 0px;
	}

	.boxTopRText {
		font-size: 13px;
		margin-top: 10px;
		color: var(--theme-text-color-lighten);
	}

	.boxCon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.boxCon img {
		width: 85px;
		height: 30px;
		margin: 10px 8px;
	}

	.boxCon img:nth-child(1),
	.boxCon img:nth-child(2),
	.boxCon img:nth-child(3) {
		width: 95px;
		height: 30px;
		margin: 10px 6px;
	}

	.boxBot {
		font-size: 13px;
		padding-bottom: 20px;
		box-sizing: border-box;
		text-align: center;
		color: var(--theme-text-color-lighten);
	}
</style>

<style lang="less" scoped>
	.recharge {
		width: 100vw;
		// min-height: 100vh;
		background-color:var(--theme-bg-color);

		.recharge_content {
			padding: 0.2rem;
			margin-top: 0.7rem;

			.recharge_content_box {
				position: relative;
			}


		}
	}
</style>